<style type="text/css">
    .banner {
        display: block;
        width: 650px;
        background-color: black;
        border: 1px solid black;
        border-bottom: none;
        border-top: none;
        text-align: center;
        margin: 0px auto;
        margin-top: 0.95em;
    }

    .banner-img {
        width: 575px;
        height: 225px;
        display: inline-block;
        margin: 0px auto;
        float:top;
        background-color: black;
    }

    .hlbox {
        display: block;
        width: 650px;
        height: 195px;
        border: 1px solid #d4ccb0;
        background-color: #fbfaf3;
        border-top: none;
        margin: 0px auto;
    }

</style>
<div class="banner">
    <div class="banner-img">
        <div id="banner-img" style="position: relative; top: 0px; left: 0px; width: 575px; height: 225px;">
            <!-- Slides Container -->
            <div u="slides" style="cursor: pointer; position: absolute; left: 0px; top: 0px; width: 575px; height: 225px; overflow: hidden;">
                <?php foreach ($hlKegiatans as $kegiatan) { ?>
                    <div><a href="<?php echo site_url("kegiatan/detail/" . $kegiatan->id); ?>"><img u="image" src2="<?php echo $kegiatan->content_id->banner_img->src; ?>" /></a></div>
                <?php } ?>
                <?php
                if (count($hlKegiatans) < 1) {
                    echo "<div><img u='image' src2='' /></div>";
                }
                ?>
            </div>

            <!-- Navigator Skin Begin -->
            <!-- jssor slider navigator skin 19 -->
            <style type="text/css">
                .jssorn19 div, .jssorn19 div:hover, .jssorn19 .av
                {
                    filter: alpha(opacity=50);
                    opacity: .5;
                    overflow:hidden;
                    cursor: pointer;
                    border: #fff 1px solid;
                }
                .jssorn19 div { background-color: #d3d3d3; }
                .jssorn19 div:hover, .jssorn19 .av:hover { background-color: gray; }
                .jssorn19 .av { background-color: #000; }
                .jssorn19 .dn, .jssorn19 .dn:hover { background-color: #a9a9a9; }
            </style>
            <!-- navigator container -->
            <div u="navigator" class="jssorn19" style="position: absolute; bottom: 0.5em; right: 10px;">
                <!-- navigator item prototype -->
                <div u="prototype" style="position: absolute; width: 12px; height: 12px;"></div>
            </div>
            <!-- Navigator Skin End -->
        </div>
    </div>
</div>
<div class="hlbox">
    <div class="sumhl ui-widget ui-content" style="width: 65%; height: 100%; float:left; padding: 0px 1em;">
        <?php foreach ($hlKegiatans as $kegiatan) { ?>
            <div class="hidden">
                <a href="<?php echo site_url("kegiatan/detail/" . $kegiatan->id); ?>"><h2 style="height: 1em; overflow: hidden;"><?php echo $kegiatan->content_id->title; ?></h2></a>
                <img src="<?php echo $kegiatan->content_id->thumbnail_img->src; ?>" style="float: left; margin: 1em; height: 100px; width: 100px;"/>
                <p>
                    <br />
                    <?php echo $kegiatan->content_id->short; ?>
                </p>
            </div>
        <?php } ?>
    </div>
    <div class="listhl" style="width: 30%; height: 100%; float:right; overflow: hidden;">
        <h2>Highlight :</h2>
        <ul style="padding-left: 0px; list-style: none; margin-top: 1.7em;">
            <?php $i = 0; ?>
            <?php foreach ($hlKegiatans as $kegiatan) { ?>
                <li><a href="<?php echo site_url("kegiatan/detail/" . $kegiatan->id); ?>"><?php echo "- " . $kegiatan->content_id->title; ?></a></li>
                <?php $i++; ?>
            <?php } ?>
        </ul>
    </div>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $(".listhl ul li a").each(function(index, elmt) {
                $(this).hover(function() {
                    jssor_slider.$PlayTo(index);
                }, function() {
                });
            });
        });
    </script>
</div>

<script type="text/javascript">
    var jssor_slider;
    jQuery(document).ready(function($) {
        var options = {
            $DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $AutoPlayInterval: 5000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 0, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3
            $SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $NavigatorOptions: {
                $Class: $JssorNavigator$,
                $ChanceToShow: 2,
                $AutoCenter: 1,
                $SpacingX: 5
            }
        };
        jssor_slider = new $JssorSlider$("banner-img", options);
        jssor_slider.$On($JssorSlider$.$EVT_PARK, function(slideIndex, fromIndex) {
            hlUpdate(slideIndex);
        });
        hlUpdate(jssor_slider.$CurrentIndex());
    });

    function hlUpdate(idx) {
        $(".sumhl div").addClass("hidden");
        $($(".sumhl div")[idx]).removeClass("hidden");
        $(".listhl ul li a").css("font-weight", "normal");
        $($(".listhl ul li a")[idx]).css("font-weight", "bold");
    }
</script>